<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CodeAtlas - 3D技术图谱</title>
    <link rel="stylesheet" href="styles.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600;800&display=swap">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
    <!-- 3D Hero Section -->
    <section class="hero">
        <div class="grid-background" id="grid"></div>
        <div class="hero-content">
            <h1 class="hero-title">CodeAtlas</h1>
            <p class="hero-subtitle">探索技术实现的立体世界</p>
            <div>
                <a href="#features" class="cta-button">
                    <i class="fas fa-vr-cardboard"></i> 开始探索
                </a>
                <a href="https://github.com/yourusername/code-atlas" class="cta-button">
                    <i class="fab fa-github"></i> 加入我们
                </a>
            </div>
        </div>
    </section>

    <!-- 3D Features -->
    <section class="features" id="features">
        <div class="container">
            <div class="features-grid">
                <div class="feature-card">
                    <i class="fas fa-cube feature-icon"></i>
                    <h3>立体化知识</h3>
                    <p>以3D视角展现技术实现的方方面面，让你对每个技术点都有更深入的理解。</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-code feature-icon"></i>
                    <h3>实战演练</h3>
                    <p>通过互动式的代码示例，直观地展示技术实现的过程，让学习更加生动有趣。</p>
                </div>
                <div class="feature-card">
                    <i class="fas fa-lightbulb feature-icon"></i>
                    <h3>创新思维</h3>
                    <p>突破传统学习方式的局限，以全新的视角探索技术实现的无限可能。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- 3D Categories -->
    <section class="categories">
        <div class="container">
            <div class="category-grid">
                <div class="category-card">
                    <img src="../icons/unity-icon.svg" alt="Unity" class="category-icon">
                    <h3>Unity开发</h3>
                    <p>深入游戏引擎的核心，探索3D世界的构建之道。</p>
                </div>
                <div class="category-card">
                    <img src="../icons/render-icon.svg" alt="渲染" class="category-icon">
                    <h3>图形渲染</h3>
                    <p>掌握现代图形渲染技术，创造震撼的视觉效果。</p>
                </div>
                <div class="category-card">
                    <img src="../icons/web-icon.svg" alt="Web" class="category-icon">
                    <h3>Web技术</h3>
                    <p>探索Web开发的前沿，构建下一代互联网应用。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Animated Stats -->
    <section class="stats">
        <div class="container">
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-number" data-value="100">0</div>
                    <div>技术实现</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" data-value="6">0</div>
                    <div>技术领域</div>
                </div>
                <div class="stat-card">
                    <div class="stat-number" data-value="1000">0</div>
                    <div>开发者</div>
                </div>
            </div>
        </div>
    </section>

    <script>
        // 创建3D网格背景
        const grid = document.getElementById('grid');
        const gridSize = 30;
        const numLines = 20;

        for (let i = 0; i <= numLines; i++) {
            const vertical = document.createElement('div');
            vertical.className = 'grid-line vertical';
            vertical.style.left = `${(i / numLines) * 100}%`;
            grid.appendChild(vertical);

            const horizontal = document.createElement('div');
            horizontal.className = 'grid-line horizontal';
            horizontal.style.top = `${(i / numLines) * 100}%`;
            grid.appendChild(horizontal);
        }

        // 3D视差效果
        document.addEventListener('mousemove', (e) => {
            const { clientX, clientY } = e;
            const { innerWidth, innerHeight } = window;
            
            const x = (clientX - innerWidth / 2) / innerWidth;
            const y = (clientY - innerHeight / 2) / innerHeight;
            
            document.documentElement.style.setProperty(
                '--mouse-x',
                `${x * 10}deg`
            );
            document.documentElement.style.setProperty(
                '--mouse-y',
                `${y * 10}deg`
            );
        });

        // 数字动画
        const animateValue = (element, start, end, duration) => {
            let startTimestamp = null;
            const step = (timestamp) => {
                if (!startTimestamp) startTimestamp = timestamp;
                const progress = Math.min((timestamp - startTimestamp) / duration, 1);
                const value = Math.floor(progress * (end - start) + start);
                element.textContent = value + (end > 100 ? '+' : '');
                if (progress < 1) {
                    window.requestAnimationFrame(step);
                }
            };
            window.requestAnimationFrame(step);
        };

        // Intersection Observer
        const observer = new IntersectionObserver((entries) => {
            entries.forEach(entry => {
                if (entry.isIntersecting) {
                    const target = parseInt(entry.target.dataset.value);
                    animateValue(entry.target, 0, target, 2000);
                    observer.unobserve(entry.target);
                }
            });
        });

        document.querySelectorAll('.stat-number').forEach(stat => {
            observer.observe(stat);
        });
    </script>
</body>
</html>
